import React from 'react';

//通用表格列表组件
class TableList extends React.Component{
  constructor(props){
    super(props);
    this.state={
      isfirstLoading: true
    };
  }
  //isfirstLoading只有在首次加载时才会用来判断列表的内容为空是因为正在加载数据
  //父组件被调用就会触发子组件的componentWillReceiveProps函数，这时接口已经申请，就可以将isfirstLoading修改成false
  componentWillReceiveProps(){
    this.setState({
      isfirstLoading: false
    })
  }
  
    render(){
      //表头信息
      let tableHeader = this.props.tableHeaders.map(
        (headers,index)=> {
          if(typeof headers === 'object'){
            return <th key={index} width={headers.width}>{headers.name}</th>
          }else if(typeof headers == 'string'){
            return <th key={index}>{headers}</th>
          }
        } 
      );
      //列表内容
      let tableInfo = this.props.children;
      //列表获取提示
      let listTips =(
          <tr>
            <td colSpan={this.props.tableHeaders.length} className="text-center">
              {this.state.isfirstLoading ? '正在加载数据...' : '没有找到相应结果...'}</td>
          </tr>
       );
      let tableBody = tableInfo.length > 0 ? tableInfo : listTips;
      return(
        <div className="row">
          <div className="col-md-12">
            <table className="table table-striped table-bordered">
              <thead>
                <tr>{tableHeader}</tr>
              </thead>
              <tbody className="table-Body">
                {tableBody} 
              </tbody>
            </table>
          </div>
        </div>
      );
    }
  }
export default TableList;

